import { defineComponent } from "vue";
import cubeSearchImg from "@/assets/images/cube/cube-search.png";
import { ElButton } from "element-plus";
import i18n from "@/languages/index";
const { t } = i18n.global;
export default defineComponent({
	props: {
		showButton: {
			type: Boolean,
			default() {
				return true;
			}
		},
		btnText: {
			type: String,
			default() {
				return t("empty.btn_text.add");
			}
		},
		width: {
			type: String,
			default() {
				return "800px";
			}
		},
		title: {
			type: String,
			default() {
				return t("empty.title.nodata");
			}
		},
		subtitle: {
			type: String,
			default() {
				return t("empty.subtitle.tips");
			}
		}
	},
	emits: ["add"],
	setup(props, { emit, slots }) {
		return () => {
			return (
				<div
					class="no-data flex justify-center leading-8 pt-10 pb-10"
					style={{ margin: "auto", maxWidth: "70%", width: props.width }}
				>
					<div>
						<div class="flex text-left">
							<div>
								<img class="left-icon" src={cubeSearchImg} style="max-width: inherit;width: 50px;" />
							</div>
							<div class="ml-8">
								<div class="empty-tips-title text-gray-500 pb-1" style="font-size:18px;">
									{props.title}
								</div>
								<div class="descript text-gray-400" style="font-size:14px;padding-top:5px;" v-html={props.subtitle}></div>
							</div>
						</div>
						<div class="flex items-center">
							<div style="width:50px"></div>
							{props.showButton ? (
								<div class="ml-8 pt-6">
									{slots.btns?.() || (
										<ElButton
											type="primary"
											size="large"
											onClick={() => {
												emit("add");
											}}
										>
											{props.btnText}
										</ElButton>
									)}
								</div>
							) : null}
						</div>
					</div>
				</div>
			);
		};
	}
});
